<template>
  <!-- <van-icon name="cross" /> -->
  <div class="login-container">
    <van-nav-bar fixed title="登录">
      <template #left>
        <van-icon @click="$router.push('/my')" name="cross" size="16" />
      </template>
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        name="mobile"
        placeholder="请填写手机号"
        :rules="rules.mobile"
      >
        <i slot="left-icon" class="iconfont iconwode"></i>
      </van-field>
      <van-field
        v-model="user.code"
        type="password"
        name="code"
        placeholder="请填验证码"
        :rules="rules.code"
      >
        <i slot="left-icon" class="iconfont iconyanzhengma"></i>
        <template #button>
          <van-button @click="codebtn" v-if="flag" type="info" size="small"
            >发送验证码</van-button
          >
          <van-count-down @finish="finish" v-else :time="time" format="ss s" />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button @click="loginBtn" block type="info" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { codeApi, loginApi } from "@/api";
import { tt } from "@/utils/storage";
// import { Toast } from "vant";
export default {
  data() {
    return {
      time: 60 * 1000,
      flag: true,
      user: {
        mobile: "13911111113",
        code: "246810"
      },
      rules: {
        code: [
          { required: true, message: "请填写验证码" },
          { pattern: /\d{6}/, message: "请填写正确的验证码" }
        ],
        mobile: [
          { required: true, message: "请填写手机号" },
          { pattern: /\d{11}/, message: "请填写正确的手机号" }
        ]
      }
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    finish() {
      //   Toast("倒计时结束");
      //   console.log("444444444");
      this.flag = true;
    },
    //发送验证码
    async codebtn() {
      this.flag = false;
      const res = await codeApi(this.user.mobile);
      // console.log(res, 33333333);
    },
    //发送登录请求
    async loginBtn() {
      const res = await loginApi(this.user);
      // console.log(res, 66666666666);
      // Toast.loading({
      //   message: "加载中...",
      //   forbidClick: true
      // });
      if (res.status == 201) {
        tt("登录成功");
        this.$store.commit("setUser", res.data.data);
        this.$router.push("/my");
      }
    }
  }
};
</script>
<style scoped lang="less">
.login-container {
  .van-nav-bar {
    background-color: #2c99ff;
    /deep/.van-nav-bar__title {
      color: #fff;
    }
    color: #fff;
    /deep/.van-icon {
      color: #fff;
    }
  }
  .van-form {
    padding-top: 100px;
  }
}
</style>
